<template>
  <button
    class="apple-button"
    :class="[
      size ? `apple-button--${size}` : '',
      variant ? `apple-button--${variant}` : '',
      {
        'apple-button--block': block,
        'apple-button--loading': loading,
        'apple-button--disabled': disabled || loading,
        'apple-button--icon-only': $slots.icon && !$slots.default,
      }
    ]"
    :disabled="disabled || loading"
    :type="nativeType"
    @click="handleClick"
  >
    <span v-if="loading" class="apple-button__loading">
      <span class="apple-button__loading-dot"></span>
      <span class="apple-button__loading-dot"></span>
      <span class="apple-button__loading-dot"></span>
    </span>
    <span v-if="$slots.icon" class="apple-button__icon">
      <slot name="icon"></slot>
    </span>
    <span v-if="$slots.default" class="apple-button__text">
      <slot></slot>
    </span>
  </button>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  variant: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'outline', 'ghost', 'link'].includes(value)
  },
  size: {
    type: String,
    default: 'md',
    validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
  },
  nativeType: {
    type: String,
    default: 'button',
    validator: (value) => ['button', 'submit', 'reset'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  block: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['click']);

const handleClick = (event) => {
  if (props.disabled || props.loading) return;
  emit('click', event);
};
</script>

<style scoped>
@import '../../assets/styles/variables.css';

.apple-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  text-align: center;
  transition: all var(--animation-speed-fast) var(--ease-apple);
  font-weight: var(--font-weight-medium);
  border-radius: var(--button-border-radius);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
  gap: 8px;
}

/* 尺寸 */
.apple-button--xs {
  height: 28px;
  padding: 0 12px;
  font-size: var(--font-size-xs);
  min-width: 28px;
}

.apple-button--sm {
  height: 32px;
  padding: 0 16px;
  font-size: var(--font-size-sm);
  min-width: 32px;
}

.apple-button--md {
  height: 40px;
  padding: 0 20px;
  font-size: var(--font-size-md);
  min-width: 40px;
}

.apple-button--lg {
  height: 48px;
  padding: 0 24px;
  font-size: var(--font-size-lg);
  min-width: 48px;
}

.apple-button--xl {
  height: 56px;
  padding: 0 28px;
  font-size: var(--font-size-xl);
  min-width: 56px;
}

/* 仅图标按钮 */
.apple-button--icon-only.apple-button--xs {
  padding: 0;
  width: 28px;
}

.apple-button--icon-only.apple-button--sm {
  padding: 0;
  width: 32px;
}

.apple-button--icon-only.apple-button--md {
  padding: 0;
  width: 40px;
}

.apple-button--icon-only.apple-button--lg {
  padding: 0;
  width: 48px;
}

.apple-button--icon-only.apple-button--xl {
  padding: 0;
  width: 56px;
}

/* 变体样式 */
.apple-button--primary {
  background-color: var(--apple-primary);
  color: white;
}
.apple-button--primary:hover:not(.apple-button--disabled) {
  background-color: var(--apple-primary-light);
  box-shadow: var(--apple-shadow-sm);
}
.apple-button--primary:active:not(.apple-button--disabled) {
  background-color: var(--apple-primary-dark);
  transform: scale(0.98);
}

.apple-button--secondary {
  background-color: var(--apple-secondary);
  color: white;
}
.apple-button--secondary:hover:not(.apple-button--disabled) {
  filter: brightness(1.1);
  box-shadow: var(--apple-shadow-sm);
}
.apple-button--secondary:active:not(.apple-button--disabled) {
  filter: brightness(0.95);
  transform: scale(0.98);
}

.apple-button--success {
  background-color: var(--apple-success);
  color: white;
}
.apple-button--success:hover:not(.apple-button--disabled) {
  filter: brightness(1.1);
  box-shadow: var(--apple-shadow-sm);
}
.apple-button--success:active:not(.apple-button--disabled) {
  filter: brightness(0.95);
  transform: scale(0.98);
}

.apple-button--warning {
  background-color: var(--apple-warning);
  color: white;
}
.apple-button--warning:hover:not(.apple-button--disabled) {
  filter: brightness(1.1);
  box-shadow: var(--apple-shadow-sm);
}
.apple-button--warning:active:not(.apple-button--disabled) {
  filter: brightness(0.95);
  transform: scale(0.98);
}

.apple-button--danger {
  background-color: var(--apple-danger);
  color: white;
}
.apple-button--danger:hover:not(.apple-button--disabled) {
  filter: brightness(1.1);
  box-shadow: var(--apple-shadow-sm);
}
.apple-button--danger:active:not(.apple-button--disabled) {
  filter: brightness(0.95);
  transform: scale(0.98);
}

.apple-button--info {
  background-color: var(--apple-info);
  color: white;
}
.apple-button--info:hover:not(.apple-button--disabled) {
  filter: brightness(1.1);
  box-shadow: var(--apple-shadow-sm);
}
.apple-button--info:active:not(.apple-button--disabled) {
  filter: brightness(0.95);
  transform: scale(0.98);
}

/* 轮廓按钮 */
.apple-button--outline {
  background-color: transparent;
  border: 1px solid var(--apple-primary);
  color: var(--apple-primary);
}
.apple-button--outline:hover:not(.apple-button--disabled) {
  background-color: rgba(0, 122, 255, 0.05);
  box-shadow: var(--apple-shadow-xs);
}
.apple-button--outline:active:not(.apple-button--disabled) {
  background-color: rgba(0, 122, 255, 0.1);
  transform: scale(0.98);
}

/* 幽灵按钮 */
.apple-button--ghost {
  background-color: transparent;
  color: var(--apple-text-primary-light);
}
.apple-button--ghost:hover:not(.apple-button--disabled) {
  background-color: rgba(0, 0, 0, 0.05);
}
.apple-button--ghost:active:not(.apple-button--disabled) {
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(0.98);
}

/* 链接按钮 */
.apple-button--link {
  background-color: transparent;
  color: var(--apple-primary);
  text-decoration: none;
  padding: 0;
  height: auto;
}
.apple-button--link:hover:not(.apple-button--disabled) {
  text-decoration: underline;
}
.apple-button--link:active:not(.apple-button--disabled) {
  color: var(--apple-primary-dark);
}

/* 禁用状态 */
.apple-button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* 块级按钮 */
.apple-button--block {
  display: flex;
  width: 100%;
}

/* 加载状态 */
.apple-button__loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.apple-button__loading-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
  margin: 0 2px;
  opacity: 0.6;
  animation: apple-loading 1.4s infinite ease-in-out both;
}

.apple-button__loading-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.apple-button__loading-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes apple-loading {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .apple-button--ghost {
    color: var(--apple-text-primary-dark);
  }
  .apple-button--ghost:hover:not(.apple-button--disabled) {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .apple-button--ghost:active:not(.apple-button--disabled) {
    background-color: rgba(255, 255, 255, 0.15);
  }
  
  .apple-button--outline {
    border-color: var(--apple-primary-light);
    color: var(--apple-primary-light);
  }
  .apple-button--outline:hover:not(.apple-button--disabled) {
    background-color: rgba(10, 132, 255, 0.1);
  }
}
</style> 